<template>
  <div class="danxuan">
    <!-- 学科 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*学科:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-select v-model="single.danSubject" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <p v-if="single1 && !single.danSubject">请输入学科</p>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 题干 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*题干:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.danName" placeholder="请输入内容" @focus="dialogVisible = true"></el-input>
          <el-dialog :visible.sync="dialogVisible" width="60%" class="qed">
            <quillEditor/>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          <p v-if="single1 && !single.danName">请输入题干</p>
        </div>
      </el-col>
    </el-row>
    <!-- 选项 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*选项:</div>
      </el-col>
      <el-col :span="20">
        <div v-for="(v, i) in form.options" :key="i">
          <el-row>
            <el-col :span="1" class="sel1">
              <div>&emsp;{{ form.options[i].code }}</div>
            </el-col>
            <el-col :span="1">
              <div>
                <el-input v-model="form.options[i].code"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input v-model="text[i]" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div><el-button type="danger" @click="del(i)">删除</el-button></div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 标答 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*标答:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="3" v-for="(v, q) in form.options" :key="q">
              <div>
                <el-radio v-model="radio" :label="q">{{ form.options[q].code }}</el-radio>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 解析 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*解析:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input v-model="single.danDesc" placeholder="请输入内容"></el-input>
        </div>
        <p v-show="single1 && !single.danDesc">请输入解析</p>
      </el-col>
    </el-row>
    <!-- 分数 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*分数:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-input-number v-model="single.danScore" @change="handleChange" :min="1" :max="10"></el-input-number>
        </div>
        <p v-if="!single.danScore">请输入分数</p>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 难度 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*难度:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-rate v-model="single.danDifficult"></el-rate>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <div class="but">
      <el-button type="primary" @click="see()">提交</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button type="success" @click="preview()">预览</el-button>
      <el-dialog title="题目" :visible.sync="centerDialogVisible" width="30%" center>
        <p>{{ single.danName }}</p>
        <span class="da" v-for="(v,i) in text" :key="form.options[i].code">{{ form.options[i].code + text[i]}}</span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import { demo } from "@/mixin/shimengtong/index.js"
import { judgelink } from "@/apis/shimengtong/Index";
import quillEditor from "@/components/shimengtong/QuillEditor.vue"
export default {
  mixins: [demo],
  data() {
    return {
      i: 0,
      form: {
        // 选项
        options: [
          {
            // 选中的A B C D
            code: 'A',
            // input中输入的每个选项
            title: '',
            // 布尔值true或false，选的哪个选项，哪个选项就为true
            isRight: false
          },
          {
            code: 'B',
            title: '',
            isRight: false
          },
        ]
      },
      single: {
        danSubject: "",//学科
        // danName: "",//题干
        danDesc: "",//解析
        danDifficult: 0,//难度
        danScore: 0,//分数
      },
      text: {}, //选项
      single1: false,
      dialogVisible: false

    }
  },
  updated() {
    console.log(this.text);
  },
  mounted() {
    console.log(this.$refs.myQuillEditor);
  },
  methods: {
    
  handleChange(danSubject) {
    console.log(danSubject);
  },
  //非空验证
  see() {
    if (!this.single.danName) {
      this.danName1 = true
    }
    if (!this.single.danSubject) {
      this.danSubject1 = true
    }
    if (!this.single.danDesc) {
      this.danDesc1 = true
    }
    //新增判断
      judgelink(this.single,this.text).then((ok) => {
        console.log(ok);
              this.$message({
        message: "新增判断成功！",
        type: "success",
      });
      })
      
   
  },
  //删除对应项
  del(i) {
    console.log(i);
    this.form.options.splice(i, 1)
  },
  },
components: {
  quillEditor
}
}
</script>
  
<style scoped>
.danxuan {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 20px;
  font-weight: 600;
}

.grid-content {
  text-align: center;
  line-height: 40px;
}

.el-row {
  margin-top: 10px;
}

.el-col {
  margin-right: 10px;
}

.sel1 {
  text-align: center;
  line-height: 40px;
  margin-left: 50px;
}

.el-rate {
  margin-top: 10px;
}

.but {
  /* margin: 10px,5px,0,20px; */
  margin-top: 30px;
  margin-left: 120px
}

p {
  height: 10px;
  font-size: 12px;
}

/* 不要删 */
.qed>>>.ql-blank {
  height: 300px;
}
</style>
  